<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="layui/layui-v2.6.8/layui/css/layui.css">
    <link rel="stylesheet" href="css/newQtn.css">
    <title>新建问卷</title>

</head>

<body style="background-image: url(jpg/141207Feh3R.jpg);">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>水平导航菜单</legend>
    </fieldset>
    <ul class="layui-nav" style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
        <li class="layui-nav-item layui-this"><a href="">选中</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">常规</a>
        </li>
        <li class="layui-nav-item"><a href="">导航</a></li>
        <li class="layui-nav-item"><a href="">演示</a></li>
    </ul>
    <form id="addQuestion">
        <div class="layui-form-item" style="margin-top: 2rem;">
     
            <label class="layui-form-label">问卷标题</label>
            <div class="layui-input-block" id="h">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                    class="layui-input" id="title" style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">问卷备注</label>
            <div class="layui-input-block">
                <input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input"
                    id="remarks"style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">问题1</label>
            <div class="layui-input-block">
                <input type="text" name="problemTitle" placeholder="请输入问题" autocomplete="off" class="layui-input"
                    id="problemList"style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
             

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">问题2</label>
            <div class="layui-input-block">
                <input type="text" name="problemTitle" placeholder="请输入问题" autocomplete="off" class="layui-input"
                    id="problemList"style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
               
            </div>
        </div>

    </form>

    <div>
        <button type="button" class="btn btn-secondary btn-sm" onclick="addProblem()" style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">新增问题</button>
        <button type="button" class="btn btn-secondary btn-sm" onclick="submitQtn()" style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">提交问卷</button>
    </div>


    <script src="layui/layui-v2.6.8/layui/layui.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>



        function addProblem() {

            let newProblem = ' ';

            newProblem = `
             <div class="layui-form-item" >
            <label class="layui-form-label">问题${$('#addQuestion .layui-form-item').length - 1}</label>
            <div class="layui-input-block">
                <input type="text" name="problemTitle" placeholder="请输入问题"
                    autocomplete="off" class="layui-input" id="problemList"style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
                    <input type="button" value="删除" onclick="deleteds(this)" id="remove" style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">

            </div>
        </div>
                `
            $("#addQuestion").append(newProblem);

        }
        function submitQtn() {
            let problemArr = [];
            let prblist = document.getElementsByName('problemTitle');
            for (let i = 0; i++; i < prblist.length) {
                problemArr.push(prblist[i].value());
            };
            problemArr.forEach(item=>{
                console.log(item);
            })
            // console.log(problemArr[0].value);
            axios({
                method: 'post',
                url: '/createQuestionnaire',
                data: $('#addQuestion').serializeArray()
            }).then(function (response) {
                let res = response.data;
                console.log(res);
                if (res.code === 200) {
                    let data = res.data;
                    alert('提交成功');
                    window.location.href = '/';
                }
                else {
                    console.log('失败');
                }
            })
        };

        function deleteds(event) {
            console.log(event);

            $(event).parents('.layui-form-item').remove()
            newIdex();
        }
        function newIdex() {
            $('#addQuestion .layui-form-label').each((i, element) => {
                $('#addQuestion .layui-form-label').eq(i + 2).text(`问题${i + 1}`)
            })
        }

    </script>
</body>

</html>